<template>
  <div class="app-container">
  	<el-row style="float: right;">
  		<el-col>
  			<el-link type="primary" class="Dwtitle" :underline="false" @click="importTemplate('地震灾害损失预评估系统用户操作手册.pdf')">地震灾害损失预评估系统用户操作手册.pdf</el-link>
			</el-col>
  	</el-row>
    <el-row justify="center" style="padding: 40px 0 50px">
    	
      <el-col :span="12">
        <el-input v-model="keyWords" placeholder="请输入关键字" size="large" clearable @clear="getList">
          <template #append><span @click="getList">搜索</span></template>
        </el-input>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-col :span="18">
        <ul v-if="list.length > 0">
          <li v-for="item in list" :key="item.messageId"
            :class="{hasRead: item.messageStatus=='1'}">
            <el-row>
              <el-col :span="22" :xs="18" :sm="18">
                <!-- <el-link type="info" :underline="false" @click="messageStatus(item)">{{ item.messageContent }}</el-link> -->
                <span @click="messageStatus(item)">{{ item.messageContent }}</span>
              </el-col>
              <el-col :span="2" :xs="6" :sm="6" style="text-align: center;color: #999">{{ formatDate(item.messageCreateTime) }}</el-col>
            </el-row>
          </li>
        </ul>
        <el-empty description="暂无消息提醒" v-else />
        <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="currentPage"
          v-model:limit="pageSize" @pagination="getList" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { queryMessage, readMessage } from '@/api/index'
import { getUserId } from '@/utils/auth'
import { useDateFormat } from '@vueuse/core'
const { proxy } = getCurrentInstance();
const data = reactive({
  keyWords: '',
  list: [],
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const { keyWords, list, currentPage, pageSize, total } = toRefs(data)

onMounted(() => {
  getList()
})

const getList = () => {
  let params = {
    userId: getUserId(),
    keyWords: keyWords.value,
    currentPage: currentPage.value,
    pageSize: pageSize.value
  }
  queryMessage(params).then(res => {
    list.value = res.data.messageList
    total.value = res.data.allNumber
  })
}

const messageStatus = (item) => {
  if(item.messageStatus == '1'){
    return
  }
  item.messageStatus = '1'
  readMessage({messageId: item.messageId}).then(res => {
    if(res.code == 200 && res.data == true){
      item.messageStatus = '1'
    }
  })
}

const formatDate = (date) => {
  return date && useDateFormat(date, 'YYYY-MM-DD HH:mm:ss').value
}
function importTemplate(name) {
  proxy.download("/base/product/downloadExcel", {
      fileName: name
  }, name);
};
</script>

<style scoped lang="scss">
:deep(.pagination-container) {
  position: relative;
}
li{
  color: #333;
  margin: 30px 0;
  .el-row{
    &:hover{
      color: var(--el-color-primary);
      cursor: pointer;
    }
  }
}
.hasRead {
  .el-row{
    color: #909399;
  }
}
:deep(.el-input-group__append) {
  color: #fff;
  background-color: var(--el-color-primary);
  box-shadow: 0 1px 0 0 var(--el-color-primary) inset, 0 -1px 0 0 var(--el-color-primary) inset, -1px 0 0 0 var(--el-color-primary) inset;
}
.ellipsis {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Dwtitle{
	margin-right: 40px;
}
:deep(.el-link__inner){
	font-size: 15px !important;
}
</style>
